<template>
  <el-form ref="form" label-position="right" :model="currentRow" label-suffix="："
           label-width="140px">


    <div class="dizhi_form_item_view">
      <div class="geology-children-dizhi">
        第一斜坡带
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="水平投影距离" prop="length">
            <el-input v-model="currentRow.length" clearable placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="垂直高度" prop="verticalHeight">
            <el-input v-model="currentRow.verticalHeight" clearable placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="地表水体">
        <el-checkbox-group v-model="currentRow.diBiaoShuiTiList">
          <el-checkbox v-for="item in EnumDiBiaoShuiTiList" :key="item.code" :label="item.code">{{item.name}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="其他" v-if="currentRow.diBiaoShuiTiList && currentRow.diBiaoShuiTiList.indexOf(5) !== -1">
        <el-input v-model="currentRow.diBiaoShuiTiOther" clearable placeholder="请描述其他地表水体"></el-input>
      </el-form-item>

      <div class="geology-children-dizhi">
        地下水出露情况
      </div>
      <el-row>
        <el-col :span="16">
          <el-form-item>
            <el-radio-group v-model="currentRow.groundwaterInfo">
              <el-radio-button v-for="item in EnumGroundwaterInfoList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地下水出露位置" prop="groundwaterPosition">
            <el-input v-model="currentRow.groundwaterPosition" clearable type="number" placeholder="">
              <template slot="prepend">第</template>
              <template slot="append">级边坡</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="geology-children-dizhi">
        自然环境
      </div>
      <el-form-item label="植被发育情况">
        <el-radio-group v-model="currentRow.zhiBeiFaYu">
          <el-radio-button v-for="item in EnumZhiBeiFaYuList" :key="item.code"
                           :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="不良地质">
        <el-radio-group v-model="currentRow.buLiangDiZhi">
          <el-radio-button v-for="item in EnumBuLiangDiZhiList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <div class="geology-children-dizhi">
        区域地质
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="地震峰值加速度" prop="acceleration">
            <el-input v-model="currentRow.acceleration" clearable placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="地质构造影响程度">
            <el-radio-group v-model="currentRow.construction">
              <el-radio-button v-for="item in EnumConstructionList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="currentRow.slopeType">
        <!-- 路堤边坡-->
        <div v-if="currentRow.slopeType === 4">
          <el-row>
            <el-col :span="12">
              <el-form-item label="原始地形坡度" prop="yuanShiPoDu">
                <el-input v-model="currentRow.yuanShiPoDu" clearable placeholder=""></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="阻挡约束条件">
                <el-radio-group v-model="currentRow.zuDang">
                  <el-radio-button v-for="item in EnumSysBooleanList" :key="item.code" :label="item.code">{{item.name}}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <div class="geology-children-dizhi">
            岩体特征
          </div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="地层岩性" prop="lithology">
                <el-input v-model="currentRow.lithology" clearable placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="产状" prop="chanZhuang">
                <el-input v-model="currentRow.chanZhuang" clearable placeholder=""></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="岩石的坚硬程度">
                <el-radio-group v-model="currentRow.rockHard">
                  <el-radio-button v-for="item in EnumRockHardList" :key="item.code" :label="item.code">{{item.name}}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="结构面发育程度" prop="jieGouMian">
                <el-select v-model="currentRow.jieGouMian" clearable placeholder="结构面发育程度">
                  <el-option
                    v-for="item in EnumJieGouMianList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>


  </el-form>
</template>
<script>

import ItemMixins from "./item.mixins";
import Enums from '@/utils/enums'

export default {
  props: ['value', 'isLook'],
  mixins: [ItemMixins,Enums],
  data() {
    return {
      EnumDiBiaoShuiTiList: [],
      EnumGroundwaterInfoList: [],
      EnumZhiBeiFaYuList: [],
      EnumBuLiangDiZhiList: [],
      EnumConstructionList: [],
      EnumRockHardList: [],
      EnumJieGouMianList: [],
      EnumSysBooleanList: [],
    }
  },
  computed: {
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    cleanData(type) {
      if (type === 4) {
        this.currentRow.structure = ''
        this.currentRow.structureSide = ''
        this.currentRow.hasRiver = 0
      } else {
        this.currentRow.hasRiver = ''
        this.currentRow.riverType = ''
      }

    },
    // 内部表单校验
    _validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  },
  mounted() {
    this.queryDictList(['EnumDiBiaoShuiTi', 'EnumGroundwaterInfo', 'EnumZhiBeiFaYu', 'EnumBuLiangDiZhi', 'EnumConstruction', 'EnumRockHard', 'EnumJieGouMian', 'EnumSysBoolean'],
      ['EnumDiBiaoShuiTiList', 'EnumGroundwaterInfoList', 'EnumZhiBeiFaYuList', 'EnumBuLiangDiZhiList', 'EnumConstructionList', 'EnumRockHardList', 'EnumJieGouMianList', 'EnumSysBooleanList']);
  }
}
</script>

<style lang="less">
  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .el-button {
    padding-right: 40px;
  }

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;

  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .geology-children-dizhi {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #1990FE;
    font-weight: 600;
  }

  .dizhi_form_item_view .el-form-item {
    margin-bottom: 5px;
  }
</style>
